<template>
	<view>
		<scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation class="scroll-row" style="height: 92rpx;">
			<view class="flex justify-center">
				<view :id="item.classCode" v-for="(item,index) in classList" 
				class="scroll-row-item px-1 py-2 font-md" 
				:class="tabIndex === index?'text-main font-weight-bold':''"
				 @click="changeTab(index)">
					{{item.className}}
				</view>
			</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in classList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="addData()"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				:refresher-threshold="200" 
				@refresherrefresh="onRefresh" >
					<w-img-card-grid :dataList="item.classData"></w-img-card-grid>
					<u-loadmore margin-top="30" margin-bottom="30" font-size="30" color="#000000" icon-type="flower" :status="loadStatus"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import classData from "@/common/data/fx_class.js";
	import fxData from "@/common/data/fx.js";
	import wImgCardGrid from '@/components/wboot/w-img-card-grid.vue';
	export default {
		components: {
			wImgCardGrid
		},
		data() {
			return {				
				scrollInto:"ly",
				show: false,
				tabIndex: 1,
				classList: classData.data,
				scrollH: 500,
				loadStatus: 'loadmore',
				triggered:false,
				_freshing:false
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
		},
		methods: {
			addData() {
				this.loadStatus = 'loading';
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, fxData.data.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(fxData.data[index]))
						this.classList[this.tabIndex].classData.push(item);
					}
					this.loadStatus = 'loadmore';
				}, 1000)

			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				let classCode = this.classList[index].classCode;
				this.scrollInto = classCode;
				if(this.classList[this.tabIndex].classData.length==0){
					this.addData()
				}
			},
			onRefresh(){
				if (this._freshing) {
					return;
				}
				this._freshing = true;
				this.triggered = true;
				
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					this.classList[this.tabIndex].classData=[];
					
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, fxData.data.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(fxData.data[index]))
						this.classList[this.tabIndex].classData.push(item);
					}
				}, 1500)
			}
		}
	}
</script>

<style>

</style>
